<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="../../template/taglib.jsp" %>
<fmt:requestEncoding value="utf-8"/>

<style type="text/css">

    #contents {
        min-height: 550px;
        background: lightsalmon;
    }
    .notice {
        background-color: lightblue;
        padding: 30px 0;
    }

    /*table {
        width: 75%;
        margin: 0 auto;
        border-collapse: collapse;
        table-layout: fixed;
        *//*내용에 따라 테이블너비가 변하는 것을 방지
           단점: 각 열의 너비가 균등너비로 고정
           해결: colgroup태그로 각 열 너비 재 설정*//*
        margin-bottom: 30px;
        *//*테이블 하단에 여백 지정 *//*
    }*/

    /*th, td {
        border: 1px solid black;
        text-align: center;
        padding: 2px 10px;
    }*/

    .tdtitle {
        /* 자동 줄 바꿈 금지 - 한 줄로 출력 */
        white-space: nowrap;
        /* 영역 밖 넘친 문자를 숨김으로 처리*/
        overflow: hidden;
        /* 넘어간 부분을 ...(ellipsis)로 처리(문자 줄임)*/
        text-overflow: ellipsis;
    }


    .pgnav {
        width: 500px;
        height: 25px;
        margin: 0 auto 50px;
        /* border: red 1px solid; */
        text-align: center;
    }

    .pgnav li {
        /* float: left; */
        padding-right: 15px;
        display: inline;
    }

    .cpage {
        color: red;
        font-weight: bold;
        font-size: 2em;
    }

</style>


<div id="contents" class="row">
    <div class="contentsHeader">
        <span class="log">Notice</span>
        <span class="wel">&nbsp;&nbsp;&nbsp;SING에 오신 것을 환영합니다.</span>
    </div>

    <div class="notice">
        <%--<div class="titlebar">
            <span><a href="#">[진행중 이벤트]</a>
                <a href="#">[종료된 이벤트]</a>
            </span>
        </div>--%>

        <table class="table table-striped">
            <!-- 테이블 열 수와 너비 설정 -->
            <colgroup>
                <col style="width: 10%"/>
                <col style=""/>
                <col style="width: 15%"/>
                <col style="width: 20%"/>
                <col style="width: 10%"/>
            </colgroup>

            <thead>
            <tr>
                <!-- 제목 행 출력 -->
                <th>번호</th>
                <th>제목</th>
                <th>작성자</th>
                <th>작성일</th>
                <th>조회</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="r" items="${lists}">
                <!-- 본문 행 출력 -->
                <tr>
                    <td>${r.bdno}</td>
                    <td class="tdtitle"><a href="view.mvc?bdno=${r.bdno}">${r.bdtitle}</a></td>
                    <td>${r.userid}</td>
                    <!-- 날짜 10개만 보이도록 잘라냄 -->
                    <td>${fn:substring(r.regdate,0,10)}</td>
                    <td>${r.reades}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>

        <ul class="pgnav">
            <li><a href="${url }1">맨처음</a></li>
            <c:if test="${cpage gt 1}">
                <li><a href="${url }${cpage-1}">이전</a></li>
            </c:if>

            <c:forEach var="i" begin="1" end="${pages}">
                <c:if test="${ i eq cpage }">
                    <li class="cpage">${i}</li>
                </c:if>
                <c:if test="${ i ne cpage }">
                    <li><a href="${url }${i}">${i}</a></li>
                </c:if>
            </c:forEach>

            <c:if test="${cpage lt pages}">
                <li><a href="${url }${cpage+1}">다음</a></li>
            </c:if>
            <li><a href="${url }${pages}">맨끝</a></li>
        </ul>

    </div>
</div>